<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/list.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="font_4rbrnnkd3iv/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="font_2856337_7iodyk0ox68/iconfont.css"/>
	</head>
	<body>
<!-- 头部 -->
			<header></header>
<!-- 右侧边栏 -->
		<aside></aside>
<!-- 中间 -->
			<div id="center">
				<!-- 头部电视 -->
				 <div id="center-top">
				 	<ol>
				 		<li><a href="">首页</a></li>
						<li><span class="iconfont icon-xiangyoujiantou"></span>电视</li>
				 	</ol>
				 </div>
				 <!-- 分类 -->
				 <div id="center-center">
				 	<dl>
				 		<dt>分类</dt>
				 		<dd>
							<ul>
								<li><a href="">4k电视</a></li>
								<li><a href="">全面屏电视</a></li>
								<li><a href="">超薄电视</a></li>
								<li><a href="">普通电视</a></li>
								<li><a href="">OLED电视</a></li>
								<li><a href="">曲面电视</a></li>
								<li><a href="">智能电视</a></li>
							</ul>
						</dd>
						<dt>品牌</dt>
						<dd>
							<ul  class="bs">
								<li><a href="#" class="pp">不限</a></li>
								<li><a href="#">康佳（KONKA）</a></li>
								<li><a href="#">KKTV</a></li>
							</ul>
						</dd>
						<dt>价格</dt>
						<dd>
							<ul class="bs1">
								<li><a href="#" class="pp">不限</a></li>
								<li><a href="#">599-99</a></li>
								<li><a href="#">1000-2999</a></li>
								<li><a href="#">3000-4999</a></li>
								<li><a href="#">5000-6999</a></li>
								<li><a href="#">7000-8999</a></li>
								<li><a href="#">9000-9999</a></li>
							</ul>
						</dd>
						<dt>观看距离</dt>
						<dd>
							<ul class="bs2">
								<li><a href="#" class="pp">不限</a></li>
								<li><a href="#">两米以上</a></li>
								<li><a href="#">1.5-2.4米</a></li>
								<li><a href="#">1.6-3.1米</a></li>
								<li><a href="#">1.8-3.4米</a></li>
								<li><a href="#">2.4-4.2米</a></li>
							</ul>
						</dd>
						<dt>屏幕尺寸</dt>
						<dd>
							<ul class="bs3">
								<li><a href="#" class="pp">不限</a></li>
								<li><a href="#">19-32英寸</a></li>
								<li><a href="#">39-43英寸</a></li>
								<li><a href="#">48-50英寸</a></li>
								<li><a href="#">55-58英寸</a></li>
								<li><a href="#">60-65英寸</a></li>
								<li><a href="#">70-75英寸</a></li>
								<li><a href="#">75英寸以上</a></li>
							</ul>
						</dd>
				 	</dl>
				 </div>
				<!-- 默认 -->
				<div id="default">
					<div id="default-left">
						<a href="#" class="mr">默认</a>
						<a href="#">价格 <span>
							<i class="iconfont icon-shangsanjiaoxing"></i>
							<i class="iconfont icon-shangsanjiaoxing"></i>
							</span>	
						</a>
						<a href="#">销量 <span class="iconfont icon-icon-"></span></a>
						<a href="#">好评 <span class="iconfont icon-icon-"></span></a>
						<a href="#">最新</a>
					</div>
				</div>
				<!-- 商品 -->
				<div id="goods">
				</div>
			</div>
<!-- 底部 -->
			<footer></footer>
	</body>
</html>
<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cookieTools.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$("header").load("head.html");
	$("footer").load("footer.html");
	// 右引入侧边栏
	$("aside").load("sidebar.html");
	// 分类点击事件
		$(".pp").css({
			color:"white",
			backgroundColor: 'red'
		});
		$(".bs li a").click(function(){
			$(".bs li a").css({
				color: 'white',
				backgroundColor: 'red'
			})
			$(".bs li a").not(this).css({
				color: 'black',
				backgroundColor: 'white'
			})
		})
		$(".bs1 li a").click(function(){
			$(".bs1 li a").css({
				color: 'white',
				backgroundColor: 'red'
			})
			$(".bs1 li a").not(this).css({
				color: 'black',
				backgroundColor: 'white'
			})
		})
		$(".bs2 li a").click(function(){
			$(".bs2 li a").css({
				color: 'white',
				backgroundColor: 'red'
			})
			$(".bs2 li a").not(this).css({
				color: 'black',
				backgroundColor: 'white'
			})
		})
		$(".bs3 li a").click(function(){
			$(".bs3 li a").css({
				color: 'white',
				backgroundColor: 'red'
			})
			$(".bs3 li a").not(this).css({
				color: 'black',
				backgroundColor: 'white'
			})
		})
		// 点击默认变色
		$(".mr").css({
			backgroundColor:"white",
			borderTop:" 2px solid #da2a2a",
			color:"#da2a2a"
		})
		$("#center #default a").click(function(){
			$(this).css({
				backgroundColor:"white",
				borderTop:" 2px solid #da2a2a",
				color:"#da2a2a"
			})
			$("#center #default a").not(this).css({
				backgroundColor:"#eee",
				borderTop:"none",
				color:"black"
			})
		})		
		$.ajax({
			url:"./php/getGoodsList.php",
			type:"get",
			data:{
					typeId:'001'
			    },
			success:function(resText){
				getData(resText);
			}
		});
		function getData(resText){
			let data = JSON.parse(resText);
			console.log(data);
			for(let i=0;i<data.length;i++){
				let odl = $("<dl></dl>")
				odl.html(
				`
					<dt><a href="details.html?id=${data[i].goodsId}"><img src="${data[i].goodsImg}"></a></dt>
					<dd class="${data[i].goodsId}">
						<h4>${data[i].goodsName}</h4>
						<div id="">${data[i].goodsDesc}</div>
						<p>￥${data[i].goodsPrice}</p>
						<div class="wrapper">
							<a href="shopping-later.html?id=${data[i].goodsId}" class="tianjia">加入购物车</a>
							<a href="">立即购买</a>
						</div>
					</dd>
				`
				).appendTo($("#goods"))
			}
			$(".tianjia").click(function(){
				let id = $(this).parent().parent().attr("class");
				console.log(id);
				if(getCookie("username") !=''){
					$.post("./php/addShoppingCart.php","vipName="+getCookie("username")+"&goodsId="+id+"&goodsCount="+1,function(data) {
						console.log(data);
					})
					$(".tianjia").attr('href',`shopping-later.html?id=${id}`);
				}else{
					$(".tianjia").attr('href','login.html');
				}
			})
			
			
		}
		
</script>